<ion-row>
  <ion-col size="2">

  </ion-col>
  <ion-col size="5">
    <ion-button (click)="onClick()" fill="outline" class="focus-button" size="large" expand="block">
      <ion-icon slot="start" name="trash-outline"></ion-icon>
      全部删除
    </ion-button>
  </ion-col>
  <ion-col size="5">
    <ion-button (click)="onClick()" fill="outline" class="focus-button" size="large" expand="block">
      <ion-icon slot="start" name="flag-outline"></ion-icon>
      全部已读
    </ion-button>
  </ion-col>
</ion-row>
<ion-row>
  <ion-col size="2">

  </ion-col>
  <ion-col size="10">
    <ion-button (click)="onClick()" fill="outline" class="focus-button" size="large" expand="block" (ionFocus)="focus()"  #allWillRead>
      <ion-icon slot="start" name="caret-forward" ></ion-icon>
      <ion-text class="mid-text"  >
        未读
      </ion-text>
      <ion-text slot="end" >
        12
      </ion-text>
    </ion-button>
  </ion-col>
</ion-row>
<ion-row>
  <ion-col size="2">

  </ion-col>
  <ion-col size="10">
    <ion-button (click)="onClick()" fill="outline" class="focus-button" size="large" expand="block">
      <ion-icon slot="start" name="caret-forward"></ion-icon>
      <ion-text class="mid-text" >
        已读
      </ion-text>
      <ion-text slot="end" >
        12
      </ion-text>
    </ion-button>
  </ion-col>
</ion-row>